<template>
  <el-card class="center-card">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="登录" name="first">登录</el-tab-pane>
      <el-tab-pane label="注册" name="second">注册</el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first', // 默认选中的标签页
    };
  },
  methods: {
    handleClick(tab) {
      console.log('当前选中的 tab:', tab);
    }
  }
};
</script>

<style scoped>
/* 给 el-card 设置宽度和高度 */
.center-card {
  width: 600px;
  height: 600px;
  margin: 0 auto; /* 居中对齐 */
  padding: 20px;
  margin-top: 350px;
}

/* 使用 flexbox 来确保整个页面内容在屏幕上居中 */
html, body {
  height: 100%;
  margin: 0;
}

#app {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
